import "./them/them.css"

//定义公共弹窗组件
(function (win) {

    if (!win) {
        console.log("ecsc layer can't get window")
        return;
    }

    function Ecsc() {
        this.showLayer = function (option, dom) {
            var parent = document.querySelector(dom);
            if (!parent) {
                parent = document.querySelector("body");
            }

            var html = '\
            <div id="_ecec_popView" style=" background: rgba(0, 0, 0, {opacity});" >\
                <div class="_ecec_bg" style="height:{MainHeight};{css};top:{top};padding:{padding}">\
                    <button class="_ecsc_close_button" style="display:{mainDisplay}; right: {padding_right};">X</button>\
                    <div class="_ecsc_m_content" style="">\
                        <div class="_ecsc_m_head">{header}</div>\
                        <div class="_ecsc_m_main">{content}</div>\
                        <div class="_ecsc_m_foot">{footer}</div>\
                    </div>\
                </div>\
             </div>'

            if (!option) {
                console.log('_ecsc', "请配置option！！！！");
                return;
            }

            var html = this.initOption(html, option);

            var node = document.createElement("div");
            node.innerHTML = html;
            var content = node.children[0];
            var button = content.children[0].children[0];
            var that = this;
            button.addEventListener("click", function () {
            
                that.closeLayer();
                if (option.hiddenCallback) {
                    option.hiddenCallback();
                }
            }, false)

            parent.appendChild(content);

            this.addEvent("#ecsc_close",function(){
                that.closeLayer();
            })


        }
        this.initOption = function (html, option) {

            //透明度
            if (option.opacity) {
                html = html.replace("{opacity}", option.opacity);
            } else {
                html = html.replace("{opacity}", '0.5');
            }

            //background
            if (option.background) {
                html = html.replace("{css}", option.background);
            } else {
                html = html.replace("{css}", 'background:pink');
            }

            //padding
            if (option.padding) {
                html = html.replace("{padding}", option.padding);
                var padding_right_arr = option.padding.split(" ");
                var padding_right = padding_right_arr[padding_right_arr.length - 1];
                console.log(padding_right);
                html = html.replace("{padding_right}", padding_right);
            } else {
                html = html.replace("{padding}", '0px 10%');
            }

            //top
            if (option.top) {
                html = html.replace("{top}", option.top);
            } else {
                html = html.replace("{top}", '20%');
            }


            //console.log(option.height)
            if (option.height) {
                html = html.replace("{MainHeight}", option.height);
                html = html.replace("{MainHeight}", '50%');
            }

            if (option.hiddenClose) {
                html = html.replace("{mainDisplay}", "none");
            } else {
                html = html.replace("{mainDisplay}", "visible");
            }

            //header
            if (option.header) {
                var str = option.header.html ? option.header.html : "";
                html = html.replace("{header}", str);
            } else {
                html = html.replace("{header}", "title");
            }

            //content

            if (option.header) {
                var str = option.content.html ? option.content.html : "title";
                html = html.replace("{content}", str);
            } else {
                html = html.replace("{content}", "content");
            }

            //footer
            if (option.header) {
                var str = option.footer.html ? option.footer.html : "footer";
                html = html.replace("{footer}", str);
            } else {
                html = html.replace("{footer}", "footer");
            }


            return html;
        }
        this.closeLayer = function (option) {

            if (option && option.beforeClose) {
                option.beforeClose();
            }

            var ecec_popView = document.querySelector("#_ecec_popView");
            var parent = ecec_popView.parentNode;
            //console.log(parent);
            parent.removeChild(ecec_popView)

            if (option && option.afterClose) {
                option.afterClose();
            }
        }
        this.addEvent = function (dom, callBack) {
            var target = document.querySelector(dom);
            if (!target) {
                console.log("注册事件失败，没查询到相应dom");
                return;
            }
            target.addEventListener('click', function () {
                callBack();
            })
        }

        /**
         * 
         * @param {*dom} dom id class
         * @param {*movePercent}   移动百分比。越大 移动距离越少
         * @param {*frushTime}   刷新时间
         */
        this.startScrollText = function (dom, movePercent, frushTime) {
            var content = document.querySelector(dom);
            console.log(content.children[0])
            var content_li_height = content.children[0] ? content.children[0].offsetHeight : 0;
            console.log(content_li_height)
            if (content_li_height == 0) {
                console.log("child height==0")
                return;
            }

            var i = 0, len = content.children.length;
            if (!movePercent) {
                movePercent = 20;
            }
            if (!frushTime) {
                frushTime = 50;
            }
            setInterval(() => {

                content.style = "margin-top:" + (-content_li_height * i / movePercent) + "px";
                i++;
                if (i > len * movePercent) {
                    i = 0;
                }
            }, frushTime)
        }

        this._inint = function(width) {
            var clientWid = document.documentElement.clientWidth;
            if (clientWid > 1080) {
                document.documentElement.style.fontSize = 1080 / width + "px";
            } else {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / width + "px";
            }
        }

        this.demoOption={
            opacity: 0.8,//透明度
            background: "background:transparent;font-size:0.35rem",//背景样式可以是图片
            height: "auto",//背景高度
            top: "10em",//距离顶部高度
            padding: '0px 2em',// padding
            hiddenClose: false,// 隐藏 右上角关闭按钮
            header: {//
                html: '<div style="background:blue;color:white;width:100%;">\
                    <span style="line-height:1.0rem;">提示</span>\
                    </div>'
            },
            content: {//
                html: '<div class="default_theme" style="; ">\
                    <span >title</span>\
                    </div>'
            },
            footer: {//
                html: '<div style="background:white;width:100%;">\
                    <span style="line-height:1.0rem;">确定</span>\
                    </div>'
            }
        }

        this.demoInfo={

            opacity: 0.8,//透明度
            background: "background:transparent;font-size:0.35rem",//背景样式可以是图片
            height: "auto",//背景高度
            top: "10em",//距离顶部高度
            padding: '0px 2em',// padding
            hiddenClose: true,// 隐藏 右上角关闭按钮
            header: {//
                html: ''
            },
            content: {//
                html: '<div class="default_theme" style="; ">\
                        <img src="https://avatar.csdn.net/3/2/D/3_elichan.jpg">\
                        <p  style="width:100%;word-break:normal;white-space:pre-warp;word-wrap:break-word;">\
                        zhodfjoajdfojfizhodfjoajdfojfiaodjaojzhodfjoajdfojfiaodjaojaodjaoj</p>\
                    </div>'
            },
            footer: {//
                html: '<div style="background:white;width:100%;padding-bottom:10px;">\
                      <span id="ecsc_close" style="line-height:1.0rem;padding:5px 10px;background:red;color:white;">确定</span>\
                    </div>'
            }

        }

        this.showInfo=function(option){}



    }

    var _ecsc = new Ecsc()

    console.log(_ecsc)
    window._ecsc = _ecsc;
}(window))
